<#include "/frag.dialog-head.ftl"/>
  <link rel="stylesheet" href="${s3('/codemirror/lib/codemirror.css')}">
  <link rel="stylesheet" href="${s3('/codemirror/addon/lint/lint.css')}">
  <link rel="stylesheet" href="${s3('/codemirror/theme/idea.css')}">
  <style>
    .CodeMirror {
      border: 0;
      height: auto;
    }

    body {
      padding: 0;
      margin: 0;
    }
  </style>

<div id="thecode" style="width:100%"></div>

<#include "/frag.dialog-foot.ftl"/>

<script src="${s3('/codemirror/lib/codemirror.js')}"></script>
<script src="${s3('/codemirror/addon/lint/lint.js')}"></script>
<script src="${s3('/codemirror/mode/yaml/yaml.js')}"></script>
<script src="${s3('/codemirror/js-yaml.js')}"></script>
<script src="${s3('/codemirror/addon/lint/yaml-lint.js')}"></script>

<script type="text/javascript">

  var contentJson = ${contentJson};
  var editor;

  $(function () {
    var target = document.getElementById("thecode");
    editor = CodeMirror(target, {
      value: contentJson.content,
      lineNumbers: true,
      mode: 'yaml',
      matchBrackets: true,
      autofocus: true,
      theme: 'idea',
      indentUnit: 2,
      tabSize: 2,
      indentWithTabs: false,
      smartIndent: true,
      viewportMargin: Infinity,
      gutters: ["CodeMirror-lint-markers"],
      lint: true,
      extraKeys: {
        Tab: function (cm) {
          var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
          cm.replaceSelection(spaces);
        }
      }
    });
  });

  function save(cb) {
    var loadingLayerHandler;
    $.ajax({
      url: '/project/${data.name}/struct',
      type: "post",
      data: JSON.stringify($.extend(contentJson, {content: editor.getValue()})),
      contentType: "application/json; charset=utf-8",
      beforeSend: function () {
        loadingLayerHandler = top.layer.msg('正在操作...', {
          icon: 16,
          shade: 0.5,
          scrollbar: false,
          zIndex: top.layer.zIndex,
          anim: 0
        });
      },
      success: function (data) {
        // 关闭遮罩层
        top.layer.close(loadingLayerHandler);
        if (data.success) {
          top.layer.msg(data.msg);
          contentJson.content = editor.getValue();
          if(cb){
            cb();
          }
          closeWindow();
        } else {
          top.layer.alert(data.msg);
        }
      },
      error: function (e) {
        // 关闭遮罩层
        top.layer.closeAll();
        top.layer.open({
          title: '发生错误',
          content: JSON.stringify(e),
          shadeClose: true,
          zIndex: top.layer.zIndex,
          anim: 0
        });
      }
    });
  }

</script>